<!DOCTYPE html>
<html lang="en">

  <head>
    <title>SaltGUI</title>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/controls.css'/>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/main.css'/>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/login.css'/>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/page.css'/>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/keys.css'/>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/job.css'/>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/grains.css'/>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/schedules.css'/>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/pillars.css'/>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/beacons.css'/>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/dropdown.css'/>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/tooltip.css'/>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/options.css'/>
    <link rel='stylesheet' type='text/css' href='static/stylesheets/events.css'/>
    <link rel='stylesheet' type='text/css' href='static/sorttable/sorttable.css'/>
    <link rel='shortcut icon' href='static/images/icon.png'/>
  </head>

  <body>
    <header id="header" class="no-print">
      <h1 class='logo'><div id="logo">SaltGUI</div></h1>
      <h1 class='fab'>
        <svg width="36" height="36">
          <circle id='button-manual-run' cx="18" cy="18" r="18" fill="#4caf50" />
          <text style='pointer-events: none' fill="white" font-weight="bold" font-size="20" x="6" y="23">&gt;_</text>
        </svg>
      </h1>
      <!-- 1F4D6 = OPEN BOOK -->
      <!-- FE0E = VARIATION SELECTOR-15 (render as text) -->
      <h1 id="docu" class='docu'>&#x1F4D6;&#xFE0E;</h1>
<!-- full menu -->
      <div class="fullmenu"></div>
<!-- mini menu -->
      <div class="minimenu">
        <div class="dropdown">
          <!-- 2261 = MATHEMATICAL OPERATOR IDENTICAL TO (aka "hamburger") -->
          <div class="menu-item" id="minimenu-top">&#x2261;</div>
          <div class="dropdown-content"></div>
        </div>
      </div>
<!-- motd -->
      <div id="motd" style="display: none; margin: 5px 0 0 20px">
        <div style="display: inline-block; vertical-align: top">
          <!-- 2716 - HEAVY MULTIPLICATION X -->
          <div id="close-motd" class="small-button small-small-button small-button-left">&#x2716;</div>
        </div>
        <div style="display: inline-block">
          <div id="motdtxt" style="padding-bottom: 5px"></div>
          <div id="motdhtml" style="padding-bottom: 5px"></div>
        </div>
      </div>
<!-- warning -->
      <div id="warning" style="display: none"></div>
    </header>

    <div id='route-container'>
    </div>

    <div class='popup' id='popup-run-command'>
      <div class='run-command'>
        <!-- 2716 = HEAVY MULTIPLICATION X -->
        <div id='cmd-close-button' class='small-button small-button-right small-button-for-click'>&#x2716;</div>
        <!-- 2753 = BLACK QUESTION MARK ORNAMENT -->
        <!-- FE0E = VARIATION SELECTOR-15 (render as text) -->
        <span id="help" class="small-button small-button-right small-button-for-click" style="cursor: help">&#x2753;&#xFE0E;</span>
        <div><h1>Manual Run</h1><p id="template-catmenu-here"></p><p id="template-tmplmenu-here"></p></div>
        <div id="target-box"><input list="data-list-target" id='target' type='text' placeholder="Target" spellcheck="false" style="margin-right: 10px"/></div>
        <div id="cmd-box"><input id='command' type='text' placeholder="Command" spellcheck="false" style="margin-right: 10px"/></div>
        <div id="run-block"><input id="run-command" type='submit' value="Run command" style="margin-right: 10px"/></div>
        <pre id="popup-output" class='output'>Waiting for command...</pre>
      </div>
    </div>

    <datalist id="data-list-target">
      <!-- dynamic content only -->
    </datalist>

    <datalist id="data-list-templates">
      <!-- dynamic content only -->
    </datalist>

    <datalist id="data-list-keys">
      <option value="accepted">
      <option value="denied">
      <option value="rejected">
      <option value="unaccepted">
    </datalist>

    <datalist id="data-list-jobs">
      <option value="done"><!-- found in Status column -->
      <option value="failure"><!-- found in Details column -->
      <option value="no results"><!-- found in Details column -->
      <option value="returned"><!-- found in Status column -->
      <option value="running"><!-- found in Status column -->
      <option value="success"><!-- found in Details column -->
    </datalist>

    <datalist id="data-list-job">
      <option value="no response">
      <option value="success = ">
      <option value="retcode = ">
      <option value="and was started at">
    </datalist>

    <!-- see https://www.the-art-of-web.com/javascript/search-highlight/ -->
    <script src="static/hilitor/hilitor.js"></script>
    <!-- see https://www.w3resource.com/JSON/JSONPath-with-JavaScript.php -->
    <script src="static/jsonpath/jsonpath-0.8.0.js"></script>
    <script src="static/scripts/config.js"></script>
    <script src="static/scripts/index.js" type='module'></script>
  </body>

</html>
